<%--
  Created by IntelliJ IDEA.
  User: TYZ
  Date: 2020/3/3
  Time: 18:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/common.jsp" %>
<html>
<body>
<div id="toolbar">
    <form class="form-inline" role="form">
        <div class="form-group">
            <label for="bookName">书名</label>
            <input type="text" class="form-control" id="bookName" name="bookName" placeholder="请输入名称">
        </div>
        <div class="form-group">
            <label for="author">作者</label>
            <select class="form-control" name="author" id="author">
                <option value="-1">请选择</option>
                <c:forEach items="${alist }" var="a">
                    <option value="${a.authorId }">${a.firstName }${a.lastName}</option>
                </c:forEach>
            </select>
        </div>
        <div class="form-group">
            <label for="publisher">出版社</label>
            <select class="form-control" name="publisher" id="publisher">
                <option value="-1">请选择</option>
                <c:forEach items="${plist }" var="p">
                    <option value="${p.pubId }">${p.pubName}</option>
                </c:forEach>
            </select>
        </div>
        <div class="form-group">
            <label for="bookCategory">图书类型</label>
            <select class="form-control" name="bookCategory" id="bookCategory">
                <option value="-1">请选择</option>
                <c:forEach items="${list }" var="c">
                    <option value="${c.catId }">${c.catName }</option>
                </c:forEach>
            </select>
            <input type="button" class="btn btn-primary" value="搜索"  onclick="getData()">
            <input type="button" class="btn btn-success" value="增加"  onclick="toAddBook()">
            <input type="button" class="btn btn-danger" value="批量删除"  onclick="deleteBook()">
        </div>
    </form>
</div>
<table id="table"></table>
</body>
<head>
    <title>Title</title>
</head>
    <script>
        $('#table').bootstrapTable({
            url: '/book/selectBook',//访问后台获取数据的url
            toolbar: '#toolbar',//工具按钮用哪个容器
            method: 'post',
            contentType : "application/x-www-form-urlencoded",//请求参数方式
            striped: true,//是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            pagination: true,//是否显示分页（*）
            sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,  //初始化加载第一页，默认第一页,并记录
            pageSize: 5,  //每页的记录行数（*）
            pageList: [3, 5, 7, 10], //可供选择的每页的行数（*）
            search: true,//是否显示表格搜索,默认false
            cardView: false,//是否显示详细视图
            detailView: false,//是否显示父子表
            showToggle: true,//是否显示详细视图和列表视图的切换按钮
            clickToSelect: true,//是否启用点击选中行
            showRefresh: true,//是否显示刷新按钮
            strictSearch: true,
            showColumns: true,//是否显示所有的列（选择显示的列）
            queryParams : function (params) {
                //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                var temp = {
                    pageSize: params.limit,                         //每页条数
                    pageNum: (params.offset / params.limit) + 1,
                    bookName:$("[name=bookName]").val(),
                    author:$("[name=author]").val(),
                    bookCategory:$("[name=bookCategory]").val(),
                    publisher:$("[name=publisher]").val(),
                };
                return temp;
            },
            columns: [{
                checkbox: true,
                visible: true //是否显示复选框
            },{
                field: 'bookId', //field对应的实体类的属性名
                title: '图书id',// title 对应的是表头
                sortable: true
            }, {
                field: 'bookName',
                title: '图书名称',
                sortable: true
            },{
                field: 'authors',
                title: '作者名称',
                sortable: true
            },{
                field: 'publishers',
                title: '出版社名称',
                sortable: true
            },{
                field: 'bookDate',
                title: '出版时间',
                sortable: true
            },{
                field: 'bookPrice',
                title: '图书价格',
                sortable: true
            },{
                field: 'bookCategorys',
                title: '图书类型',
                sortable: true
            },{
                field: 'bookState',
                title: '图书上下架',
                sortable: true,
                formatter : function(value, row, index){
                    if(value == 0){
                        return "下架";
                    }else if(value == 1){
                        return "上架";
                    }
                },
            }, {
                title : '上下架',
                formatter : function(value, row, index) {
                    var bookId = row.bookId;
                    return '<a class="btn btn-info1" href="javascript:updateTrue(' + bookId + ')">下架</a>'+
                        '<a class="btn btn-info1" href="javascript:updateFalse(' + bookId + ')">上架</a>';
                }
            },{
                title: '操作',
                width: 120,
                align: 'center',
                valign: 'middle',
                formatter:function(value,row,index){
                    var bookId = row.bookId;// js 数组的方法，将数组里面的值根据join('abc') abc进行拼接
                    return [
                        '<a class="btn btn-xs blue" title="编辑" href="javascript:toUpdateBook('+bookId+')" ><span class="glyphicon glyphicon-pencil"></span></a>',
                        '<a class="btn btn-xs red" title="删除" href="javascript:deleteBook('+bookId+')"><span class="glyphicon glyphicon-remove"></a>'].join('');
                }
            },]
        });
        //刷新表格
        function getData(){
            $('#table').bootstrapTable("refresh")//refresh 刷新
        }

        //添加角色
        function toAddBook(){
            BootstrapDialog.show({
                type : BootstrapDialog.TYPE_SUCCESS,//弹出框类型 颜色
                title : '添加角色 ',//load jquery的方法
                message : $('<div></div>').load("/book/toAddBook"),//$() 都是jquery对象
                // size : BootstrapDialog.SIZE_SMALL,//size为小，默认的对话框比较宽
                buttons : [ {// 设置关闭按钮
                    label : '关闭',
                    action : function(dialogItself) {//点击按钮方法
                        dialogItself.close();
                    }
                },{
                    label : '确定',
                    cssClass:'btn-success',
                    action : function(dialogItself) {//点击按钮方法
                        /*alert($("[name=bookName]").val());
                        alert($("[name=author]").val())
                        return;*/
                        $.ajax({
                            url:"/book/addBook",
                            data:$("#addForm").serialize(),//参数
                            dataType:"json",
                            type:"post",
                            async:false,
                            success:function(data){
                                if(data){
                                    dialogItself.close();
                                    alert("添加成功");
                                    getData();
                                }else{
                                    alert("添加失败");
                                }
                            },
                            error:function(){
                                alert("系统错误，请联系管理员");
                            }
                        })
                    }
                } ],
                // 对话框关闭时带入callback方法
            });
        }

        function toUpdateBook(bookId){
            BootstrapDialog.show({
                type : BootstrapDialog.TYPE_SUCCESS,//弹出框类型 颜色
                title : '修改角色 ',//load jquery的方法
                message : $('<div></div>').load("/book/toUpdateBook/"+bookId),//$() 都是jquery对象
                // size : BootstrapDialog.SIZE_SMALL,//size为小，默认的对话框比较宽
                buttons : [ {// 设置关闭按钮
                    label : '关闭',
                    action : function(dialogItself) {//点击按钮方法
                        dialogItself.close();
                    }
                },{
                    label : '确定',
                    cssClass:'btn-success',
                    action : function(dialogItself) {//点击按钮方法
                        $.ajax({
                            url:"/book/updateBook",
                            data:$("#updateForm").serialize(),//参数
                            dataType:"json",
                            type:"post",
                            async:false,
                            success:function(data){
                                if(data==true){
                                    dialogItself.close();
                                    alert("修改成功");
                                    getData();
                                }else{
                                    alert("修改失败");
                                }
                            },
                            error:function(){
                                alert("系统错误，请联系管理员");
                            }
                        })
                    }
                } ],
                // 对话框关闭时带入callback方法
            });
        }

        function deleteBook(bookId){
            if(confirm("是否确认删除")){//用户确定后执行删除操作
                $.ajax({
                    url:"/book/deleteBook/"+bookId,
                    data:{},//参数
                    dataType:"json",
                    type:"post",
                    async:false,
                    success:function(data){
                        if(data==true){
                            alert("删除成功");
                            getData();//刷新表格
                        }else{
                            alert("删除失败");
                        }
                    },
                    error:function(){
                        alert("系统错误，请联系管理员");
                    }
                })
            }
        }
        function deleteBook(){
            var ids = [];
            var rows = $('#table').bootstrapTable("getSelections");
            $(rows).each(function(index,e){
                ids.push(e.bookId);
            })
            if(ids.length <= 0){
                toastr.success("请选择要删除的数据");
                return;
            }
            $.ajax({
                url:"/book/deleteBookAll",
                data:{ids:ids},//参数
                dataType:"json",
                type:"post",
                async:false,
                success:function(data){
                    if(data==true){
                        alert("删除成功");
                        getData();//刷新表格
                    }else{
                        alert("删除失败");
                    }
                },
                error:function(){
                    alert("系统错误，请联系管理员");
                }
            })
        }
        function updateTrue(bookState){
            $.ajax({
                url:"<%=path %>/book/updateTrue/" + bookState,
                type:"post",
                dataType:"json",
                success:function(result){
                    toastr.success("下架");
                    getData();
                },
                error:function(result){
                    toastr.error("系统异常,请联系管理员");
                }
            })
        }

        function updateFalse(bookState){
            $.ajax({
                url:"<%=path %>/book/updateFalse/" + bookState,
                type:"post",
                dataType:"json",
                success:function(result){
                    toastr.success("上架");
                    getData();
                },
                error:function(result){
                    toastr.error("系统异常,请联系管理员");
                }
            })
        }
    </script>
</html>
